<template>
	<view class="orderList">
		<view class="tabs">
			<view class="tab" v-for="(item,i) in tabList" :key="i" :class="active == item.id ? 'active tab' : 'tab'"
				@click="changeActive(item.id)">{{item.name}}</view>
		</view>
		<view class="container">
			<view class="cont" v-for="(item,i) in orderList" :key="i">
				<view class="top">
					<view class="type">{{switchType(item.orderType)}}</view>
					<view class="line"></view>
					<view class="time" v-if="(item.orderType == 2 || item.orderType == 3) && item.classTime">{{item.classTime}}</view>
					<view class="time" v-else-if="item.orderType == 1">{{item.classTime}}</view>
					<view class="time" v-else-if="item.orderType == 0">充{{item.totalPrice}}享{{item.actualPayment / item.totalPrice * 100}}折</view>
					<view class="status">{{switchStatus(item.orderStatus)}}</view>
				</view>
				<view class="detail">
					<view class="dTop" v-if="item.orderType != 0">
						<image :src="item.imgUrl"></image>
						<view class="dCont">
							<view class="title">{{item.name}}</view>
							<view class="price">
								<text class="symbol">¥</text>
								<text class="num">{{item.totalPrice}}</text>
								/节
							</view>
						</view>
					</view>
					<view v-if="item.orderType == 0" class="line"></view>
					<view class="dMiddle">
						<view class="box">
							<view class="labName">订单编号</view>
							<view class="labCont">{{item.orderNum}}</view>
						</view>
						<view class="box" v-if="item.orderType != 1">
							<view class="labName">下单时间</view>
							<view class="labCont">{{item.placeOrderTime}}</view>
						</view>
						<view class="box" v-if="item.orderType == 1">
							<view class="labName">已付押金</view>
							<view class="labCont">{{item.deposit}}</view>
						</view>
						<view class="box" v-if="item.orderStatus == 1">
							<view class="labName">付款时间</view>
							<view class="labCont">{{item.payTime}}</view>
						</view>
						<view class="box" v-if="item.orderStatus == 1">
							<view class="labName">实际付款</view>
							<view class="labCont">{{item.actualPayment}}</view>
						</view>
						<view class="box" v-if="item.orderStatus == 2 && (item.orderType == 2 || item.orderType == 3)">
							<view class="labName">上课时间</view>
							<view class="labCont">{{item.classTime}}</view>
						</view>
					</view>
					<view class="dDown" v-if="item.orderStatus == 0">
						<view class="des">需付款</view>
						<view class="num">￥<text>{{item.actualPayment}}</text></view>
						<view class="btnBox">
							<button class="chanle" v-if="item.orderType == 2 || item.orderType == 3"
								@click="cancelPay(item.orderId)">取消订单</button>
							<button class="pay" @click="continuePay(item.orderId)">立即支付</button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getUserOrders,
		cancelPay,
		continuePay
	} from "@/api/getData.js";
	export default {
		data() {
			return {
				href: 'https://uniapp.dcloud.io/component/README?id=uniui',
				active: '',
				tabList: [{
					id: 10,
					name: '全部'
				}, {
					id: 0,
					name: '待支付'
				}, {
					id: 1,
					name: '已支付'
				}, {
					id: 2,
					name: '已完成'
				}, {
					id: 3,
					name: '未完成'
				}],
				orderList: [],
				// {
				// 	orderId: 0,
				// 	orderStatus: 1, //0-待支付，1-已支付，2-已完成，3-未完成,4-退款
				// 	orderType: 0, //3-私教课，2-团体课，1-开台，0-充值
				// 	recharge_amount: 300, //orderType=0才有，其余为null
				// 	presented: 20, //orderType=0才有，其余为null
				// 	dateTime: '2022-11-05 14:00', //预约时间，type= 1 2时有
				// 	playTime: '2022-11-05 14:00', //开台时间， type = 3时有
				// 	orderTime: '2022-11-05 14:00', //订单生成时间
				// 	imgUrl: 'https://cloudcdn.noitom.com.cn/noitom2/billiard/appointmentIcon.png',
				// 	name: '私教体验课',
				// 	price: '120', //单价，type = 1 2 3时有
				// 	duration: '14', //时长，type = 3时有
				// 	orderNumber: '6568562659526', //订单号
				// 	paymentAmount: 140 //需付款金额，type = 3时，price*duration
				// }, {
				// 	orderId: 0,
				// 	orderStatus: 1, //0-待支付，1-已支付，2-已完成，3-未完成,4-退款
				// 	orderType: 1, //3-私教课，2-团体课，1-开台，0-充值
				// 	recharge_amount: 300, //orderType=4才有，其余为null
				// 	presented: 20, //orderType=4才有，其余为null
				// 	dateTime: '2022-11-05 14:00', //预约时间，type= 1 2时有
				// 	playTime: '2022-11-05 14:00', //开台时间， type = 3时有
				// 	orderTime: '2022-11-05 14:00', //订单生成时间
				// 	imgUrl: 'https://cloudcdn.noitom.com.cn/noitom2/billiard/appointmentIcon.png',
				// 	name: '计时开台',
				// 	price: '120', //单价，type = 1 2 3时有
				// 	duration: '14', //时长，type = 3时有
				// 	orderNumber: '6568562659526', //订单号
				// 	paymentAmount: 140 //需付款金额，type = 3时，price*duration
				// }, {
				// 	orderId: 0,
				// 	orderStatus: 1, //0-待支付，1-已支付，2-已完成，3-未完成,4-退款
				// 	orderType: 2, //3-私教课，2-团体课，1-开台，0-充值
				// 	recharge_amount: 300, //orderType=4才有，其余为null
				// 	presented: 20, //orderType=4才有，其余为null
				// 	dateTime: '2022-11-05 14:00', //预约时间，type= 1 2时有
				// 	playTime: '2022-11-05 14:00', //开台时间， type = 3时有
				// 	orderTime: '2022-11-05 14:00', //订单生成时间
				// 	imgUrl: 'https://cloudcdn.noitom.com.cn/noitom2/billiard/appointmentIcon.png',
				// 	name: '私教体验课',
				// 	price: '120', //单价，type = 1 2 3时有
				// 	duration: '14', //时长，type = 3时有
				// 	orderNumber: '6568562659526', //订单号
				// 	paymentAmount: 140 //需付款金额，type = 3时，price*duration
				// }, {
				// 	orderId: 0,
				// 	orderStatus: 1, //0-待支付，1-已支付，2-已完成，3-未完成,4-退款
				// 	orderType: 3, //3-私教课，2-团体课，1-开台，0-充值
				// 	recharge_amount: 300, //orderType=4才有，其余为null
				// 	presented: 20, //orderType=4才有，其余为null
				// 	dateTime: '2022-11-05 14:00', //预约时间，type= 1 2时有
				// 	playTime: '2022-11-05 14:00', //开台时间， type = 3时有
				// 	orderTime: '2022-11-05 14:00', //订单生成时间
				// 	imgUrl: 'https://cloudcdn.noitom.com.cn/noitom2/billiard/appointmentIcon.png',
				// 	name: '私教体验课',
				// 	price: '120', //单价，type = 1 2 3时有
				// 	duration: '14', //时长，type = 3时有
				// 	orderNumber: '6568562659526', //订单号
				// 	paymentAmount: 140 //需付款金额，type = 3时，price*duration
				// }
			}
		},
		onLoad(option) {
			this.active = option.orderId
			console.log(option.orderId)
			this.getUserOrders()
		},
		methods: {
			//继续支付continuePay
			async continuePay(id) {
				var _this = this
				const param = {
					orderId: id
				}
				const {
					data: res
				} = await continuePay(param)
				console.log(res, 22222)
				wx.requestPayment({
					timeStamp: res.data.start.timestamp,
					nonceStr: res.data.start.nonceStr,
					package: res.data.pay.packageStr,
					signType: res.data.pay.signType,
					paySign: res.data.pay.paySign,
					success(req) {
						console.log(req)
						_this.payStatus(res.data.paymentId, res.data.start.timestamp, res.data.start
							.nonceStr,
							res.data.pay.packageStr, res.data.pay.paySign)

					},
					fail(e) {
						console.log(e)
					}
				})
				// this.getUserOrders()
			},
			
			//支付结果上报
			async payStatus(paymentId, timeStamp, nonceStr, packages, paySign) {
				const param = {
					paymentId: paymentId,
					timeStamp: timeStamp,
					nonceStr: nonceStr,
					packageStr: packages,
					paySign: paySign,
				}
				const {
					data: res
				} = await payStatus(param)
				if (res.data) {
					uni.navigateTo({
						url: "/pages/pay/paymentSuccess?odatetime="+res.data.odatetime+"&paymentNo="+res.data.paymentNo+"&type="+res.data.type+"&price=" + res.data.price + ""
					});
				}
			
			},
			//取消支付
			async cancelPay(id) {
				const {
					data: res
				} = await cancelPay(id)
				console.log(res, 22222)
				uni.$showMsg('取消成功', 1500, 'success')
				this.getUserOrders()
			},
			//订单列表
			async getUserOrders() {
				const param = {
					status: this.active
				}
				const {
					data: res
				} = await getUserOrders(param)
				console.log(res, 22222)
				this.orderList = res.data
			},
			//切换订单状态
			changeActive(id) {
				this.active = id
				//todo
				this.getUserOrders()
			},
			switchStatus(id) {
				switch (id) {
					case 0:
						return '待支付'
					case 1:
						return '已支付'
					case 2:
						return '已完成'
					case 3:
						return '未完成'
					case 4:
						return '已退款'
					case 5:
						return '已取消'
				}
			},
			switchType(id) {
				switch (id) {
					case 0:
						return '会员充值'
					case 1:
						return '开台时间'
					case 2:
						return '团体课'
					case 3:
						return '私教课'
						// case 4:
						// 	return '会员充值'
				}
			}
		}
	}
</script>

<style lang="less">
	.orderList {
		.tabs {
			height: 88rpx;
			display: flex;
			line-height: 88rpx;
			font-size: 28rpx;
			justify-content: space-between;
			padding: 0 32rpx;
			background: #ffffff;

			.tab {
				text-align: center;
			}

			.active {
				color: #E60012;
				border-bottom: 4rpx solid #E60012;
			}
		}

		.container {
			padding: 0 32rpx 32rpx;

			.cont {
				background: #FFFFFF;
				border-radius: 16rpx;
				margin-top: 32rpx;
				padding: 32rpx;
				line-height: 1;

				.top {
					display: flex;
					align-items: center;
					font-size: 24rpx;

					.line {
						width: 2rpx;
						height: 16rpx;
						background: #C4C4C4;
						margin: 0 16rpx;
					}

					.status {
						color: #E60012;
						margin-left: auto;
					}
				}

				.detail {
					.dTop {
						display: flex;
						margin-top: 30rpx;

						image {
							display: block;
							width: 140rpx;
							height: 140rpx;
							margin-right: 20rpx;
						}

						.dCont {
							line-height: 1;
							display: flex;
							flex-wrap: wrap;
							align-content: space-between;
							padding: 10rpx 0;

							.title {
								font-size: 32rpx;
								font-weight: bold;
								width: 100%;
							}

							.price {
								color: #A4A4A4;
								font-size: 20rpx;
								width: 100%;

								text {
									color: #000;
									color: #E60012;
								}

								.symbol {
									font-size: 20rpx;
								}

								.num {
									font-size: 36rpx;
									font-weight: bold;
								}
							}
						}
					}

					.line {
						background: #E2E2E2;
						height: 2rpx;
						margin-top: 32rpx;
					}

					.dMiddle {
						.box {
							display: flex;
							justify-content: space-between;
							margin-top: 32rpx;
							font-size: 24rpx;

							.labCont {
								color: #5B5B5B;
							}
						}
					}

					.dDown {
						display: flex;
						align-items: center;
						margin-top: 46rpx;

						.des {
							font-size: 24rpx;
							color: #5B5B5B;
							margin-right: 16rpx;
						}

						.num {
							font-size: 20rpx;
							color: #E60012;

							text {
								font-size: 36rpx;
								font-weight: bold;
							}
						}

						.btnBox {
							margin-left: auto;
							display: flex;
						}

						button {
							width: 142rpx;
							height: 58rpx;
							background: #E60012;
							border-radius: 29rpx;
							padding: 0;
							line-height: 58rpx;
							font-size: 24rpx;
							color: #FFFFFF;
							margin: 0;
							box-sizing: border-box;
						}

						.chanle {
							border: 1px solid #B2B2B2;
							background: #fff;
							color: #5B5B5B;
							margin-right: 18rpx;
						}
					}
				}
			}
		}
	}
</style>
